<template>
  <div>
    <el-dialog title="门店信息" :visible.sync="showSalesroomDialog" center width="900px">
      <el-table :data="salesroomList" class="table" border :key="salesroomList.length">

        <el-table-column label="机构名称" align="center">
          <template slot-scope="{row}">
            <span>{{row.name}}</span>
          </template>
        </el-table-column>

        <el-table-column label="详细地址" align="center">
          <template slot-scope="{row}">
            <span>{{ getAddress(row.province_id, row.city_id, row.country_id, row.address)}}</span>
          </template>
        </el-table-column>

        <el-table-column label="联系人" align="center">
          <template slot-scope="{row}">
            <span>{{row.contact}}</span>
          </template>
        </el-table-column>

        <el-table-column label="联系电话" align="center">
          <template slot-scope="{row}">
            <span>{{row.telephone}}</span>
          </template>
        </el-table-column>

        <el-table-column label="联系人微信二维码" align="center">
          <template slot-scope="{row}">
            <img :src="row.wechat_qrcode === ''? null: row.wechat_qrcode" alt="暂无二维码"
                 @click="bigImage(row.wechat_qrcode)">
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
  import store from '@/store'
  import {list} from '@/api/thk/salesroom'

  export default {
    name: 'salesroom',

    data() {
      return {

        /**
         customer_organization_salesroom_id: 3
         organization_id: "7"
         name: "我的机构"
         country_id: "东城区"
         province_id: "北京"
         city_id: "北京市"
         address: "广东省河源市"
         wechat_qrcode: "https://dlxq.oss-cn-shenzhen.aliyuncs.com/1591184167820.com/05bbb693-6539-4a56-be28-3d5da9e993fe"
         contact: "黄彩平"
         telephone: "13018458158"
         deleted: 0
         */
        bigImageSrc: null,

        showSalesroomDialog: false,
        formLabelWidth: '130px',
        salesroomList: []

      }
    },



    methods: {
      showSalesroom(organization_id){
        this.showSalesroomDialog = !this.showSalesroomDialog
        list(store.getters.token, {organization_id}).then(res => {
          this.salesroomList = res.data.list.data
          console.log(this.salesroomList)
        }).catch(err => {
          this.$message('获取失败!')
        })
        console.log(organization_id)
      },

      getAddress(province, city, country, address){
        let detailedAddress = ""
        if(province !== null && province !== ''){
          detailedAddress += (province+"省")
        }
        return detailedAddress + city + country + address
      },


      // 大图弹窗函数
      bigImage(src) {
        if (src!==null) {
          this.$set(this, 'bigImageSrc', src)
          console.log(this.bigImageSrc)
        } else {
          this.$set(this, 'bigImageSrc', null)
        }
      },



    }
  }
</script>

<style scoped>
  img{
    height: 50px;
    width: 50px;
    margin: 0;
    padding: 0;
  }
  .table{
    width: 98%;
    margin: 10px auto 0;
  }
  .bigImg img{
    max-width: 600px;
    min-width: 150px;
    height:auto;
    border-radius:10px;
  }

  .bigImg {
    min-width: 100%;
    min-height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    background: rgba(0, 0, 0, .5);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    /*transition:1s;*/
  }
</style>
